<template>
    <transition name="slider">
        <div class="favorite">
            <m-header :canreturn=true :titleText="titleText"></m-header>
            <div class="favoritbox" ref="favoritbox">
                <scroll class="favoritwrapper" :pullUpLoad=pullUpLoad :data=data @pullingUp='getFavorit' ref="favoritwrapper">
                    <div class="wrapper">
                        <div class="game-list" v-for="(game,index) in apps" :key=index @click="goGameDetail(game.gameId)">
                            <div class="item">
                                <div>
                                    <div class="icon">
                                        <img v-lazy="game.gameIcon" alt="">
                                    </div>
                                    <div class="item-content">
                                        <h3>{{game.gameName}}</h3>
                                        <div class="star">
                                            <div class="star-wrapper">
                                                <span class="star-icon" :style="{ width: game.star*20+'%' }"></span>
                                            </div>
                                            <p class="score">{{game.size}}MB</p>
                                            <div class="type">
                                                <span class="game-desc" v-for="(type,index) in game.tagsName" :key=index>{{type}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button class="downbtn">详情</button>
                            </div>
                        </div>
                        <div class="game-list">
                            <div class="item">
                                <div @click="goGameDetail(27)">
                                    <div class="icon">
                                        <img src="http://img.sdk.yxorange.com//icon/2018/04/25/5ae0456694c94.png" alt="">
                                    </div>
                                    <div class="item-content">
                                        <h3>测试游戏</h3>
                                        <div class="star">
                                            <div class="star-wrapper">
                                                <span class="star-icon" style="width:100%"></span>
                                            </div>
                                            <p class="score">120MB</p>
                                            <div class="type">
                                                <span class="game-desc">测试</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button class="downbtn" @click.stop.prevent="downGame(list.gameIcon,list.android)">下载</button>
                            </div>
                        </div>
                        <div>
                            <loading :title="moremessageLoadingText" v-show="moreMessage"></loading>
                        </div>
                    </div>
                </scroll>
            </div>
            <router-view></router-view>
            <!-- <div class="loading-container" v-show="isloading">
                <loading></loading>
            </div> -->
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
import MHeader from '@/components/m-header/m-header';
import Scroll from '@/base/scroll/scroll';
import Loading from '@/base/loading/loading';
import { getCommonInfoHasData } from '@/base/api/indexpage/getindexinfo';
import { mapGetters } from 'vuex';

export default {
    data() {
        return {
            titleText: '我的关注',
            apps: [],
            page: 1,
            pullUpLoad: true,
            data: 0, // 通知scroll组件 更新上拉状态
            isloading: true,
            moremessageLoadingText: '',
            moreMessage: false,
            totalPage: 1,
        };
    },
    created() {
        this._getInfo();
    },
    mounted() {
        this.$refs.favoritbox.style.top = 44 + parseInt(this.statusbar) + 'px';
    },
    methods: {
        _getInfo() {
            const address = '/user/follow';
            getCommonInfoHasData(address, {
                page: this.page,
                token: this.getToken,
            }).then((res) => {
                console.log(res);
                this.apps = res.data.list;
                this.isloading = false;
                this.page = res.data.currentPage + 1;
                this.totalPage = Math.ceil(res.data.total / res.data.pageSize);
                this.moreMessage = false;
            });
        },
        getFavorit() {
            if (this.page <= this.totalPage) {
                this.moreMessage = true;
                this._getInfo();
            }
        },
        goGameDetail(id) {
            console.log(id);
            this.$router.push({
                path: `/mine/favorite/gamedetail/${id}`,
                query: {
                    commentAddress: '/mine/favorite/gamedetail',
                },
            });
        },
        downGame(icon, android) {
            console.log(icon);
            console.log(android);
        },
    },
    computed: {
        ...mapGetters(['getToken', 'statusbar']),
    },
    components: {
        MHeader,
        Scroll,
        Loading,
    },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

slider();

.favorite {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background: #ffffff;

    .favoritbox {
        position: fixed;
        top: 44px;
        bottom: 0;
        width: 100%;
        background: #ffffff;

        .favoritwrapper {
            overflow: hidden;
            width: 100%;

            .wrapper {
                .game-list {
                    width: 100%;
                    margin-top: 10px;
                    box-shadow: 0 -2px 5px #d1d0d0;
                    background: #ffffff;
                    padding: 0 10px;
                    box-sizing: border-box;

                    &:first-child {
                        margin: 0;
                    }

                    h3 {
                        padding: 15px 0;
                        color: #222222;
                        font-weight: bold;
                    }

                    .item {
                        display: flex;
                        align-items: center;
                        height: 100px;
                        padding-top: 1px;
                        box-sizing: border-box;
                        position: relative;
                        text-decoration: none;
                        border-bottom: 1px solid #eeeeee;

                        .icon {
                            height: 80px;
                            position: absolute;
                            left: 0;
                            top: 9px;

                            img {
                                height: 100%;
                            }
                        }

                        .item-content {
                            margin-left: 100px;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;

                            h3 {
                                font-size: $font-size-large;
                                margin: 0;
                                color: #333333;
                                // padding: 10px 0 0 0;
                                padding: 0;
                            }

                            .star {
                                .star-wrapper {
                                    width: 50px;
                                    display: inline-block;
                                    height: 10px;
                                    position: relative;
                                    overflow: hidden;

                                    .star-icon {
                                        position: absolute;
                                        left: 0;
                                        top: 0;
                                        display: inline-block;
                                        height: 10px;
                                        background: url('./star.png');
                                        background-size: 10px 10px;
                                    }
                                }

                                .score {
                                    font-size: $font-size-small;
                                    padding: 3px 0;
                                    color: $color-font;
                                }
                            }
                        }

                        .type {
                            margin-top: 4px;

                            .game-desc {
                                box-sizing: border-box;
                                width: 34px;
                                height: 15px;
                                border: 1px solid #febf01;
                                border-radius: 5px;
                                font-size: $font-size-small;
                                color: #febf01;
                                padding: 2px 4px;
                                margin-right: 6px;
                            }
                        }

                        .downbtn {
                            position: absolute;
                            right: 15px;
                            top: 30px;
                            downloadbtn();
                        }
                    }
                }
            }
        }
    }

    .loading-container {
        loading();
        z-index: 99999;
    }
}
</style>

